<template>
    <div>
        <a-modal v-model:visible="show" title="相关质量通知单" width="1700px" @ok="handleOk" @cancel="handleCancel">
            <!-- 切换本订单，本供应商 -->
            <a-radio-group default-value="1" button-style="solid" v-model="dataRange" @change="changeDataRange"
              style="margin-left: 8px">
              <a-radio-button value="1">本订单</a-radio-button>
              <a-radio-button value="2">本供应商</a-radio-button>
            </a-radio-group>
            <!-- 未完结,已完结,全部-->
            <a-radio-group default-value="1" button-style="solid" v-model="dataStatusRange" @change="changeDataStatusRange"
              style="margin-left: 20px">
              <a-radio-button value="1">未完结</a-radio-button>
              <a-radio-button value="2">已完结</a-radio-button>
              <a-radio-button value="3">全部</a-radio-button>
            </a-radio-group>

            <a-table :columns="columns" :data-source="records" :pagination="false"
            bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
            </a-table>

            <a-pagination :current="listQuery.pageNo" :page-size="listQuery.pageSize" 
            :total="totalRecord"  
            style="margin-top:15px;"/>
        </a-modal>
    </div>
</template>

<script>
    import { getAction, postAction } from '@/api/manage'
    export default {
        props:{
            show: {
                type: Boolean,
                default: false,
            },
            orderNo:{
                type: String,
                default: null
            },
            supplierCode:{
                type: String,
                default:null
            }
        },

        created(){
            
        },

        mounted() {
            //this.showVisible = true
            console.log('采购订单号:',this.orderNo)
            console.log('供应商编码:',this.supplierCode)
        },

        data() {
            return {
                urls: {
                    list:'/workReport/quality/page'
                },
                columns:[

                    {
                        title: '单据状态',
                        dataIndex: 'status',
                        scopedSlots: { customRender: 'statusRender' },
                        width: '100px',
                        align: 'center',
                        ellipsis: true,
                    },
                    {
                        title: '质量通知单号',
                        dataIndex: 'qualityNo',
                        width: '180px',
                        align: 'left',
                        scopedSlots: { customRender: 'qualityNoRender' },
                        ellipsis: true,
                        },
                    {
                        title: '质量单据名称',
                        dataIndex: 'name',
                        width: '150px',
                        align: 'left',
                        ellipsis: true,
                    },
                    {
                        title: '违约/扣罚类型',
                        dataIndex: 'qualityType',
                        width: '100px',
                        align: 'left',
                        scopedSlots: { customRender: 'qualityTypeRender' },
                        ellipsis: true,
                    },
                    {
                        title: '申报扣罚金额',
                        dataIndex: 'fineAmount',
                        width: '150px',
                        align: 'center',
                        ellipsis: true,
                    },
                    {
                        title: '审批扣罚金额',
                        dataIndex: 'spFineAmount',
                        width: '150px',
                        align: 'center',
                        ellipsis: true,
                    },
                    {
                        title: '采购订单号',
                        dataIndex: 'poNo',
                        width: '150px',
                        align: 'center',
                        ellipsis: true,
                    },
                    {
                        title: '合同名称',
                        dataIndex: 'contractName',
                        width: '150px',
                        align: 'left',
                        ellipsis: true,
                    },
                    {
                        title: '供应商编码',
                        dataIndex: 'supplierName',
                        width: '150px',
                        align: 'center',
                        scopedSlots: { customRender: 'supplierRender' },
                        ellipsis: true,
                    },
                    {
                        title: '申请人',
                        dataIndex: 'applyUser',
                        width: '80px',
                        align: 'center',
                        ellipsis: true,
                    },
                    {
                        title: '申请时间',
                        dataIndex: 'applyDate',
                        width: '180px',
                        align: 'center',
                        ellipsis: true,
                    },
                    
                    // {
                    //     title: '来源',
                    //     dataIndex: 'platForm',
                    //     width: '100px',
                    //     align: 'center',
                    //     ellipsis: true,
                    // },
                ],
                totalRecord:0, 
                records:[],
                selectedRowKeys: [],
                listQuery:{ page:1, pageSize:10 },
                dataRange:'1',  //数据范围 1=本订单,2=本供应商
                dataStatusRange:'1' //1=未完结,2=已完结，3=全部
            }
        },

        methods:{
            handleOk() {
                //this.show =false
                let result = []
                if(this.currentSelection && this.currentSelection.length > 0){
                    //qualityNo
                    this.currentSelection.forEach((item,index) =>{
                        result.push(item.qualityNo)
                    })
                    //console.log(JSON.stringify(this.currentSelection))
                }
                this.$emit('close', result)
            },
            handleCancel(e) {
                //this.show =false
                this.$emit('close', [])
            },
            onSelectChange(selectedRowKeys, selectedRows) {
                console.log(selectedRowKeys)
                console.log(selectedRows)
                this.selectedRowKeys = selectedRowKeys
                this.currentSelection = selectedRows
            },

            changeDataRange(){
                console.log('改变数据集范围',this.dataRange)
                if(this.dataRange == '1'){
                    delete this.listQuery.supplierCode
                    this.$set(this.listQuery, 'poNo', this.orderNo)
                    //this.$set(this.listQuery,'supplierCode',null)
                }else if(this.dataRange == '2'){
                    delete this.listQuery.poNo
                    //this.$set(this.listQuery, 'poNo',null)
                    this.$set(this.listQuery,'supplierCode',this.supplierCode)
                }
                this.fetchList()
            },
            changeDataStatusRange(){
                console.log('改变完结状态',this.dataStatusRange)
                this.listQuery.finishStatus = this.dataStatusRange
                //this.$set(this.listQuery, 'finshStatus', this.dataStatusRange)
                this.fetchList()
            },
            fetchList(){
                console.log('request data:',JSON.stringify(this.listQuery))
                postAction(this.urls.list, this.listQuery).then((res) => {
                    if (res.success) {
                        this.records = res.result.records
                        this.totalRecord = res.result.total
                    }
                })
            },
        },
        watch: {
            show(newV, oldV) {
                console.log('newV:',newV)
                console.log('oldV:',oldV)
                if(newV){
                    this.selectedRowKeys = []
                    this.currentSelection = []
                    console.log('打开')
                    console.log('AA采购订单号:',this.orderNo)
                    console.log('BB供应商编码:',this.supplierCode)
                    this.$set(this.listQuery, 'poNo', this.orderNo)
                    this.$set(this.listQuery, 'finishStatus', this.dataStatusRange)
                    this.fetchList()
                }
                if(oldV){
                    console.log('关闭')
                }
            
            },
        },

    }

</script>


<style scoped>


</style>